{% extends "base_lang.html" %}

{% block title %}Cookie Policy - Sprunki Phase 3{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="pt-20 pb-12 md:pt-32 md:pb-20 bg-gradient-to-r from-primary to-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">{{ _('Cookie Policy') }}</h1>
            <p class="text-xl text-white mb-8">{{ _('How We Use Cookies to Improve Your Experience') }}</p>
        </div>
    </div>
</section>

<!-- Content Section -->
<section class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="space-y-8">
            <section>
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('What Are Cookies') }}</h2>
                <p class="text-gray-600 dark:text-gray-300">
                    {{ _('Cookies are small text files that are placed on your computer or mobile device when you visit our website. They help us make the site work better for you.') }}
                </p>
            </section>

            <section>
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('How We Use Cookies') }}</h2>
                <p class="text-gray-600 dark:text-gray-300 mb-4">{{ _('We use cookies for the following purposes:') }}</p>
                <ul class="list-disc pl-6 space-y-2 text-gray-600 dark:text-gray-300">
                    <li>{{ _('Essential cookies: Required for the website to function properly') }}</li>
                    <li>{{ _('Analytics cookies: Help us understand how visitors use our site') }}</li>
                    <li>{{ _('Preference cookies: Remember your settings and preferences') }}</li>
                    <li>{{ _('Marketing cookies: Used to deliver relevant advertisements') }}</li>
                </ul>
            </section>

            <!-- Cookie Preferences -->
            <section class="bg-gray-50 dark:bg-gray-700 p-8 rounded-lg shadow-lg">
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('Cookie Preferences') }}</h2>
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <label class="text-gray-600 dark:text-gray-300">{{ _('Essential Cookies') }}</label>
                        <input type="checkbox" checked disabled class="form-checkbox h-5 w-5 text-primary">
                    </div>
                    <div class="flex items-center justify-between">
                        <label for="analytics" class="text-gray-600 dark:text-gray-300">{{ _('Analytics Cookies') }}</label>
                        <input type="checkbox" id="analytics" class="form-checkbox h-5 w-5 text-primary">
                    </div>
                    <div class="flex items-center justify-between">
                        <label for="preferences" class="text-gray-600 dark:text-gray-300">{{ _('Preference Cookies') }}</label>
                        <input type="checkbox" id="preferences" class="form-checkbox h-5 w-5 text-primary">
                    </div>
                    <div class="flex items-center justify-between">
                        <label for="marketing" class="text-gray-600 dark:text-gray-300">{{ _('Marketing Cookies') }}</label>
                        <input type="checkbox" id="marketing" class="form-checkbox h-5 w-5 text-primary">
                    </div>
                    <button onclick="saveCookiePreferences()" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded transition duration-300">
                        {{ _('Save Preferences') }}
                    </button>
                </div>
            </section>
        </div>
    </div>
</section>
{% endblock %}
